<script setup>
import { ref } from "vue";
import { formatTime } from "@/utils/format";
import { getUserDetail } from "@/api/userManage";

const visibleDrawer = ref(false);
const userDetail = ref({});

const handleOpen = async (row) => {
  visibleDrawer.value = true;
  const res = await getUserDetail(row.userId);
  userDetail.value = res.data.data;
};

// 数据映射
const roleMap = { 1: "普通用户", 2: "农户" };
const statusMap = { 1: "正常", 0: "禁用" };

defineExpose({
  handleOpen,
});
</script>

<template>
  <!-- 抽屉 -->
  <el-drawer
    v-model="visibleDrawer"
    title="用户详情"
    direction="rtl"
    size="50%"
  >
    <el-card style="max-width: 100%">
      <el-form ref="ruleFormRef" :model="userDetail" label-width="80px">
        <el-form-item>
          <el-upload
            class="avatar-uploader"
            :auto-upload="false"
            :show-file-list="false"
            disabled
          >
            <img
              v-if="userDetail.avatar"
              :src="userDetail.avatar"
              class="avatar"
            />
            <img v-else src="@/assets/avatar.jpg" width="150" />
          </el-upload>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="userDetail.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="用户id">
          <el-input v-model="userDetail.userId" disabled></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-tag :type="userDetail.roleType === 1 ? 'primary' : 'success'">
            {{ roleMap[userDetail.roleType] || "错误" }}
          </el-tag>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="userDetail.realName" disabled></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="userDetail.phone" disabled></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="userDetail.email" disabled></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="userDetail.address" disabled></el-input>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-input
            :value="formatTime(userDetail.createTime)"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="更新时间">
          <el-input
            :value="formatTime(userDetail.updateTime)"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-tag :type="userDetail.status === 1 ? 'success' : 'danger'">
            {{ statusMap[userDetail.status] || "错误" }}
          </el-tag>
        </el-form-item>
      </el-form>
    </el-card>
  </el-drawer>
</template>

<style lang="scss" scoped>
.avatar-uploader {
  :deep() {
    .avatar {
      width: 150px;
      height: 150px;
      display: block;
      object-fit: cover; /* 图片自适应容器 */
    }
    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }
    .el-upload:hover {
      border-color: var(--el-color-primary);
    }
  }
}
</style>
